<template>
   <div class="carbuttonbar">
      <div class="bar-button">
         <checked-button class="bar-button-item" :isChecked="isChecked" @click.native="isAllCheck"></checked-button>
        <span class="all">全选</span>
      </div>
     <div class="allPrice">
        <span>合计:</span>
        <span class="price">{{allPrice}}</span>
     </div>
     <div class="toPrice">
        <span>去结算:</span>
        <span>{{toPrice}}</span>
     </div>
   </div>
</template>

<script>
  import CheckedButton from "./CheckedButton";
  export default {
    name: "CarButtonBar",
    components:{
      CheckedButton
    },
    props:{
      allPrice:{
        type:String,
        default:0

      },
      toPrice:{
        type:Number,
        default:0
      },

    },
    computed:{
      isChecked(){
         if(this.$store.state.productlist.length==0) return false
        //返回符合条件的
         return   !this.$store.state.productlist.find(item=>!item.checked)

      }
    },
    methods:{
      isAllCheck(){
        //如果全选点击就是每个就不选
          if(this.isChecked){
            for(let item of this.$store.state.productlist){
               item.checked=false;
            }
          }else{
            for(let item of this.$store.state.productlist){
                item.checked=true;
            }
          }
      }
    }
  }
</script>

<style scoped>
.carbuttonbar{
  background-color: #aaa;
  height: 44px;
}

.bar-button{
   float: left;
   width: 40px;
   height: 40px;
}
.all{
  position: relative;
  right: 0;
  left: 4px;
  top: -15px;
}
.bar-button-item{
    position: relative;
    right: 0;
    left: 40px;
    top: 8px;
  }
  .allPrice{
    line-height: 44px;
    float: left;
    position: relative;
    right: 0;
    left: 50px;

  }
.toPrice{
  width: 100px;
  float: right;
  position: relative;
  line-height: 44px;
  background-color: red;

}
</style>
